<template>
  <div>
    <div class="welcome-message">
      <h1>欢迎来到二手交易市场</h1>
      <p>交易有风险，谨慎操作，校内交易也需谨慎，确保交易合法合规，不贪图便宜，保护自身财产。</p>
    </div>
    <!-- 搜索框 -->
    <div style="display: flex">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="二手商品名称" prop="name">
          <el-input v-model="searchForm.name" style="width: 500px;"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="handleSearch" icon="el-icon-search">搜 索</el-button>
          <el-button @click="reset1Form" icon="el-icon-refresh-left">重 置</el-button>
        </el-form-item>
      </el-form>
      <el-button  type="success" icon="el-icon-plus" @click="dialogVisible = true">发布二手商品</el-button>
    </div>

    <!-- 发布商品弹窗 -->
    <el-dialog
        title="发布商品"
        :visible.sync="dialogVisible"
        width="500px"
        @close="resetForm"
    >
      <el-form :model="form" ref="form" label-width="100px" class="publish-form">
        <el-form-item label="商品名称" prop="name" :rules="[{ required: true, message: '请输入商品名称', trigger: 'blur' }]">
          <el-input v-model="form.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <!-- 商品描述 -->
        <el-form-item label="商品描述" prop="description" :rules="[{ required: true, message: '请输入商品描述', trigger: 'blur' }]">
          <el-input type="textarea" v-model="form.description" placeholder="请输入商品描述"></el-input>
        </el-form-item>
        <!-- 价格 -->
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入价格" type="number"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="community">
          <el-input v-model="form.community" placeholder="请输入联系方式"></el-input>
        </el-form-item>
        <el-form-item label="售卖人" prop="seller">
          <el-input v-model="form.seller" placeholder="售卖人" disabled></el-input>
        </el-form-item>
        <!-- 发布日期 -->
        <el-form-item label="发布日期" prop="date" :rules="[{ required: true, message: '请选择发布日期', trigger: 'change' }]">
          <el-date-picker v-model="form.date" type="date" placeholder="请选择发布日期"></el-date-picker>
        </el-form-item>
        <!-- 商品图片 -->
        <el-form-item label="封面图">
          <el-upload
              style="text-align: center;padding-bottom:10px;"
              :action="$httpUploadFile"
              :show-file-list="false"
              :on-success="uploadImgSuccess"
          >
            <img v-if="form.img" :src="form.img" alt="" style="width: 150px;height: 150px">
            <i v-else class="el-icon-plus"
               style="font-size: 28px;width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #ccc"> </i>
          </el-upload>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submit">发布商品</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">完成</el-button>
      </span>
    </el-dialog>
<div style="display: flex">
  <div>
  <!-- 商品列表区域 -->
  <div style="display: flex;">
    <el-row style="margin: 10px">
      <!-- 商品卡片 -->
      <el-col :span="6" v-for="item in listData" :key="item.id" >

        <el-card class="product-card">
          <div  style="width: 100%; height: 180px; overflow: hidden; position: relative;">
            <el-image
                :src="item.img"
                :preview-src-list="[item.img]"
            >
            </el-image>
          </div>
          <div class="product-info">
            <h3>{{ item.name }}</h3>
            <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ item.description }}</p>


            <div class="product-footer">
              <span class="price">¥{{ item.price }}</span>
              <el-button type="primary" @click="showContactInfo(item)">获取联系方式和商品描述</el-button>
            </div>
            <p>{{ item.publicTime }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

<div style="display: flex ">
  <!-- 联系方式弹窗 -->
  <el-dialog  title="商品联系方式" :visible.sync="contactDialogVisible" width="700px"  @close="handleClose" >
    <div>
      <p>商品描述: {{ this.description }}</p>
      <p>联系方式: {{ this.contactInfo }}</p>
    </div>
  </el-dialog>
</div>

      <div style="margin-bottom: 80px">
        <!-- 分页组件 -->
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.pageNum"
            background
            layout="prev, sizes,pager, next"
            :page-sizes="[8, 16, 24, 32, 40, 48]"
            :total="total">
        </el-pagination>
      </div>

</div>
</div>
  </div>
</template>
<script>
import Utils from "@/utils/utils";

export default {
  name: "SecondHandGoodsManage",
  data() {
    return {
      description:'',
      contactInfo: '',
      searchForm: {},
      dialogVisible: false,
      contactDialogVisible: false,
      searchQuery: "",
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 8
      },
      form: {
        seller:Utils.getUserInfo().id,
      },
      listData:[],
    }
  },
  created() {
    this.getPageList()
  },
  methods: {
    handleClose() {
      console.log('弹窗已关闭');
    },
    submit() {
      if (!this.form.id) {
        this.$axios.post("/secondHandGoods/add", this.form).then(res => {
          if (res.code === 200) {
            this.isDrawerDialog = false
            this.$message({
              message: res.msg,
              type: "success"
            })
            this.getPageList()
            this.dialogVisible = false
          }
        })
      }
    },
    uploadImgSuccess(res) {
      this.$set(this.form, "img", res.data.url)
    },
    getPageList() {
      //分页条件 查询条件
      let data = Object.assign(this.searchForm, this.pageInfo)
      this.$axios.get("/secondHandGoods/page", {
        params: data
      }).then(res => {
        //获取列表数据
        this.listData = res.data.list
        console.log(this.listData)
        //获取分页数据
        this.total = res.data.total
      })
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    currentChange(e) {
      this.pageInfo.pageNum = e
      this.getPageList()
    },
    sizeChange(e) {
      this.pageInfo.pageSize = e
      this.getPageList()
    },
    showContactInfo(item) {
      this.description = item.description
       this.contactInfo = item.community;
      this.contactDialogVisible = true;
    },
    handleSearch() {
      //当我们点击搜索的时候，页面会切换到第一页
      this.pageInfo.pageNum = 1
      this.getPageList()
    },
    reset1Form() {
      this.$refs['searchForm'].resetFields()
    },

  },


};
</script>
<style scoped>

.product-card {
  height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.product-image img {
  width: 100%;
  height: auto;
}
.product-info {
  padding: 10px 0;
}
.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}
.welcome-message {
  text-align: center; /* 让内容居中 */
  padding: 20px; /* 增加内边距，避免文字贴边 */
}

.welcome-message h1 {
  font-family: 'Arial', sans-serif; /* 字体样式 */
  color: #333; /* 字体颜色 */
  font-size: 36px; /* 字体大小 */
  margin-bottom: 10px; /* 下边距 */
  font-weight: bold; /* 加粗 */
}

.welcome-message p {
  font-family: 'Georgia', serif; /* 字体样式 */
  color: #666; /* 字体颜色 */
  font-size: 18px; /* 字体大小 */
  line-height: 1.6; /* 行高，增加可读性 */
  margin-top: 0; /* 去掉上边距 */
}
</style>
